<template>
	<view>
		<view class="container">
			<swiper class="swiper" circular :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="item in 5" :key="item"><image class="swiper-item" src="http://imgv.bawangdao.com/static/image/index/banner.png"></image></swiper-item>
			</swiper>
			<view class="btn-banner" v-if="show">
				<view class="btn">
					<view class="btn-left" :class="[active === 1 ? 'active' : '']" @click="btnChange(1)">霸王餐</view>
					<view class="btn-right" :class="[active === 2 ? 'active' : '']" @click="btnChange(2)">霸王券</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			active: 1
		};
	},
	methods: {
		btnChange(index) {
			this.active = index;
			this.$emit('type',index)
		}
	}
};
</script>

<style lang="less" scoped>
.container {
	width: 690rpx;
	margin: 20rpx 30rpx;
	border-radius: 20rpx;
	position: relative;
	.swiper {
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
		.swiper-item {
			width: 100%;
			display: block;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			border-radius: 20rpx;
		}
	}
	.btn-banner {
		display: flex;
		justify-content: center;
		text-align: center;
		transform: translateY(-50rpx);
		.btn {
			width: 300rpx;
			height: 50rpx;
			display: flex;
			justify-content: flex-start;
			.btn-left {
				width: 300rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #ffffff;
				font-size: 32rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				border-radius: 50rpx 0rpx 0rpx 50rpx;
			}
			.btn-right {
				width: 300rpx;
				height: 80rpx;
				background: #ffffff;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				border-radius: 0rpx 50rpx 50rpx 0rpx;
			}
			.active {
				background: #ff6456;
				color: #ffffff;
			}
		}
	}
}
</style>
